<template>
	<view class="helpBox">
    <cloudHeader slot="gHeader" background="#1B1B2B">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          style="color: #fff"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center font-32"
          style="color: #fff; font-size: 36rpx"
          >{{ $t("mf.my.serve") }}</view
        >
        <!-- 右侧按钮 -->
        <view class="icons" style="font-size: 38rpx"></view>
      </view>
    </cloudHeader>
		<view class="helpBox-cnt">
			<text>{{feedback}}</text>
			<view class="helpBox-cnt-uinput">{{text}}
				<u-icon name="arrow-down" color="#999"
				:custom-style="{marginLeft:'490rpx'}"
				@click="show = true"></u-icon>
			</view>
			<u-picker mode="selector"
				@confirm="feedbackConfirm" :range="feedbackType" v-model="show"></u-picker>
			<text>{{problemDescription}}</text>
			<u-input type="textarea" class="helpBox-cnt-uinputarea" placeholder="请详细描述您的问题，便于我们解决问题~" placeholderStyle="padding:'10rpx'" :custom-style="{marginLeft:'20rpx'}" />
			<text>{{uploadPictures}}</text>
			<view class="helpBox-cnt-upload">
				<u-upload :custom-btn="true">
					<image slot="addBtn" max-count="1" src="/static/help-upload.png"></image>
				</u-upload>
			</view>
			<button type="primary" class="confirm-btn">{{deliveryConfirmation}}</button>
		</view>
	</view>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      type: null,
      content: null,
      load_img: null,
      isLoading: false,
      appeal_list: {},
      down: false,
      feedback:'反馈类型',
      problemDescription:'问题描述',
      uploadPictures:'上传照片(最多可上传一张)',
      deliveryConfirmation:'确认发送',
      show:false,
      feedbackType:[
      	"系统问题",
      	"奖励问题"
      ],
      text:'系统问题'
    };
  },
  methods: {
    feedbackConfirm(v){
    	this.text = this.feedbackType[v[0]]
    },
    ...mapActions("media", ["upload"]),
    ...mapActions("mf/my", ["appealType", "appealAdd"]),
    uploadImg() {
      uni.chooseImage({
        count: 1,
        success: async (params) => {
          let res = await this.upload(params);
          if (res.statusCode == 200) {
            this.load_img = res.url;
          }
        },
      });
    },
    deleteImg() {
      this.load_img = null;
    },
    showDown() {
      this.down = !this.down;
    },
    clickItem(data) {
      this.type = data;
      this.showDown();
    },
    async submit() {
      if (!this.type || !this.content || !this.load_img) {
        this.makeToast({ title: "请填写完整工单" });
        return;
      }
      let imgs = [this.load_img];
      console.log(imgs);
      await this.appealAdd({
        type: this.type.key,
        message: this.content,
        images: imgs,
      });
      this.content = null;
      this.load_img = null;
      this.makeToast({ title: "提交成功" });
    },
  },
  computed: {
    selectMenu() {
      let select = [];
      let types = this.appeal_list;
      console.log(types);
      for (const key in types) {
        let obj = {
          key: key,
          value: types[key],
        };
        select.push(obj);
      }
      console.log(select);
      return select;
    },
  },
  async onLoad() {
    this.isLoading = true;
    this.appeal_list = await this.appealType();
    this.type = this.selectMenu[0];
    this.isLoading = false;
  },
};
</script>

<style scoped lang="scss">
	page{
		color: #222;
		background-color: #f5f5f5;
		.helpBox{
			width: 750rpx;
			height: 1176rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			background-color: #fff;
			.helpBox-cnt{
				width: 702rpx;
				height: 932rpx;
				margin:0 auto;
				padding-top: 48rpx;
				font-size: 32rpx;
				text{
					font-size: 32rpx;
				}
				.helpBox-cnt-uinput{
					color: #222222;
					height: 100rpx;
					line-height: 100rpx;
					border-radius: 4rpx;
					background-color: #F5F5F5;
					margin: 28rpx 0 48rpx 0;
					padding-left: 20rpx;
				}
				.helpBox-cnt-uinputarea{
					height: 192rpx;
					background-color: #F5F5F5;
					margin-top: 28rpx;
					margin-bottom: 58rpx;
				}
				.helpBox-cnt-upload{
					height: 160rpx;
					background-color: #F5F5F5;
					margin-top: 25rpx;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					image{
						width: 120rpx;
						height: 120rpx;
						margin-right: 30rpx;
						border: 1px dotted #a1a1a1;
					}
				}
				.confirm-btn{
					height: 88rpx;
					margin-top: 60rpx;
					font-size: 32rpx;
				}
			}
		}
	}
</style>
